<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .code_show .codeId {
            display: inline-block;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 23px;
            font-weight: 700;
            color: blue;
            letter-spacing: 2px;
            background-color: grey;
        }

        .input_code {
            margin-top: 10px;
        }

        .input_code #inputCode {
            width: 100px;
            height: 30px;
        }

        #btn1 {
            width: 50px;
            height: 30px;
            font-size: 18px;
            text-align: center;
            background-color: gray;
        }
    </style>
</head>

<body>
    <div class="code">
        <span class="code_show">
            <span class="codeId">af</span>
            <a class="linkbt">看不清换一张</a>
        </span>
    </div>
    <div class="input_code">
        <label class="inputCode">验证码：</label>
        <input type="text" id="inputCode">
    </div>
    <input type="text" id="btn1" value="确定">
</body>
<script>
    // 在页面加载的时候 
    const codeId = document.querySelector('.codeId');
    const linkbt = document.querySelector('.linkbt');
    const btn = document.querySelector('#btn1');
    const input = document.querySelector('#inputCode');
        window.onload = function(){
        // var res = getCode();
        function getCode() {
            var arr = ['0', '1', '2', '3', '4', '5', '6', 'a', 'b', 'c', 'd', 'e', 'f'];
            var str = '';
            for (var i = 0; i<6; i++) {
                var num = Math.round(Math.random() * (12 - 0) + 0);   //一共13个字母  但是这里要写12。
                str += arr[num];  //拼接 循环一次 就在我身上
                // str = str + arr[num];
            }
            return str;
            // console.log(str);
        }
       codeId.innerHTML = getCode();

        //点击事件 点击换一张 就是再调用一次
        linkbt.onclick = function(){
            codeId.innerHTML =getCode();
        }
       //提交进行对比   是要对比里面的内容 是否 相等
      btn.onclick = function(){
        var code = codeId.innerHTML
        var inputCode = input.value
        if(code!= inputCode){
            alert('你输入错误');
            input.value  ='';  //作用域的问题 这里又是局部作用域 外边的是全局作用域
            return false;
        }
       }
    }

    //思路： 首先onload 是页面加载时。
    /* 1.自己设定一个数组，在数组里面随机拿6个数。逻辑：首先抓住一个点，拿6个数，那么我们需要循环。 其次是随机 那么我们肯定需要用到随机数，之前随机数是有公式的。
    循环的时候循环六个数字 再用拼接 就是 += 这个式子拼接  */
    /* 2.拼接完之后，我们肯定需要拿到拼接的随机数去渲染网页。用到innnerHTML或者innerText来改变页面的内容。    */
    /* 3.用户输入 如果错误 我们需要提示。那么怎么知道用户输出错误呢 就需要把用户当前输入的内容和拿到的随机数对比。*/
</script>

</html>